<!--Morris Chart CSS -->
<link rel="stylesheet" href="/Public/css/common/morris.css">
<style>
    .table>thead>tr>th{text-align: center;border-bottom:0}
    .table>tbody>tr>td{vertical-align: middle; text-align: center; border-top:0}
</style>
<div id="page-wrapper">
    <div class="row">
        <div class="col-lg-12">
            <h3 class="page-header">
                <span>数据统计</span>
            </h3>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <ul class="nav nav-tabs" id="myTab">
                        <li class="active"><a href="#tab1">总概</a></li>
                        <li><a href="{:U('User/Questionnaire/statisticsDate',array('id' => $id))}">最新数据</a></li>
                        <li><a href="{:U('User/Questionnaire/statisticsUser',array('id' => $id))}">用户行为</a></li>
                        <li><a href="{:U('User/Questionnaire/statisticsOption',array('id' => $id))}">选题统计</a></li>
                    </ul>
                </div>
                <div class="panel-body">
                    <div class="form-horizontal">
                        <input type="hidden" name="questionnaire_id" value="{$questionnaire_id}">
                        <div class="tab-content">
                            <div class="tab-pane active">
                                <div class="panel-body">
                                    <table class="table">
                                        <thead>
                                        <tr>
                                            <th width="15%">完成总量</th>
                                            <th width="15%">新增完成量</th>
                                            <th width="15%">平均答题时长</th>
                                            <th width="15%">完成率</th>
                                            <th width="15%">总PV</th>
                                            <th width="15%">总UV</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>{$total_complete}</td>
                                                <td>{$day_complete}</td>
                                                <td>{$average_duration}</td>
                                                <td>{$rate}</td>
                                                <td>{$page_view}</td>
                                                <td>{$uv_count}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    <div id="graph-line"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--Morris Chart-->
<script src="/Public/js/common/morris-chart/morris.js"></script>
<script src="/Public/js/common/morris-chart/raphael-min.js"></script>
<script>
    var day_data = <?php echo $list;?>;
    Morris.Line({
        element: 'graph-line',
        data: day_data,
        xkey: 'date',
        ykeys: ['page_view', 'uv'],
        labels: ['PV', 'UV'],
        lineColors:['#1FB5AD','#6dc5a3'],
        parseTime: false
    });

    $(function () {
        $('#myTab a:first').tab('show');//初始化显示哪个tab
    })
</script>